import { createApp } from 'vue';
import MessageBox from './index.vue';

/**
 * 显示 alert 类型消息框
 * @param {Object} props - 消息框属性
 * @param {string} [props.title] - 消息框标题
 * @param {string} props.message - 消息内容
 * @param {'info'|'success'|'warning'|'error'} [props.type] - 消息类型
 * @param {boolean} [props.showClose] - 是否显示关闭按钮
 * @param {string} [props.confirmText] - 确认按钮文本
 * @returns {Promise} 关闭时 resolve 的 Promise
 */
/**
 * 合并默认属性与用户传入属性
 * @param {Object} userProps - 用户传入属性
 * @returns {Object} 合并后的属性
 */
const mergeProps = (userProps) => {
    const defaults = {
        type: 'info',
        showClose: true,
        confirmText: '确定',
        title: '提示'
    };
    return { ...defaults, ...userProps };
};

MessageBox.alert = (props) => {
    return new Promise((resolve) => {
        // 参数校验
        if (!props || typeof props.content !== 'string') {
            throw new Error('MessageBox.alert 要求传入包含 content 字符串的 props 对象');
        }

        // 创建带唯一ID的容器避免冲突
        const containerId = `message-box-${Date.now()}`;
        const container = document.createElement('div');
        container.id = containerId;
        container.className = 'message-box-container';
        const messageBox = createApp(MessageBox, {
            ...mergeProps(props),
            ...props,
            close
        });

        open();

        function open(){
            messageBox.mount(container);
            document.body.appendChild(container);
            // 监听窗口关闭事件，确保清理
            window.addEventListener('beforeunload', close);
        }

        function close(){
            window.removeEventListener('beforeunload', close);
            messageBox.unmount();
            container.remove();
            resolve();
        }
    });
}

export default MessageBox;
